<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/rank.css">
    <link rel="stylesheet" href="./css/sort.css">
    <title>排行榜</title>
</head>
<body>
    <!-- 侧边栏导航 -->
    <div id="mySidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="index.html">首页</a>
        <a href="sort.html">分类</a>
        <a href="rank.html">排行榜</a>
        <a href="community.html">广场</a>
        <a href="login.html">登陆</a>
        <a href="register.html">注册</a>
    </div>  
    <!-- 主要内容 -->
    <div id="main">
        <div class="top">
            <span onclick="openNav()">&#9776; 侧边导航栏</span>
        </div>
        <!-- 电梯 -->
        <div class="tabs">
            <div class="tabs-t">
                <div class="tab-group">
                    <p class="tab-group-t">男生排行榜</p>
                    <ul>
                        <li class="tab-group-i active" data-id="one">热门榜</li>
                        <li class="tab-group-i" data-id="two">新书榜</li>
                        <li class="tab-group-i" data-id="three">完结榜</li>
                    </ul>
                </div>
                <div class="tab-group">
                    <p class="tab-group-t">女生排行榜</p>
                    <ul>
                        <li href="#" class="tab-group-i" data-id="four">热门榜</li>
                        <li href="#" class="tab-group-i" data-id="five">新书榜</li>
                        <li href="#" class="tab-group-i" data-id="six">完结榜</li>
                    </ul>
                </div>
                <div class="tab-group">
                    <p class="tab-group-t">出版排行榜</p>
                    <ul>
                        <li href="#" class="tab-group-i" data-id="seven">畅销榜</li>
                        <li href="#" class="tab-group-i" data-id="eight">当当榜</li>
                    </ul>
                </div>
            </div>

             <!--书本内容  -->
            <div class="tabs-content" style="margin-left: 175px; margin-right: 35px;">
                <!-- 男生排行榜 -->
                <div class="rank-nan">
                    <p style="font-family: '仿宋';font-size: 30px; padding: 10px 0 20px 0;" >男生排行榜</p>
                    <span class="bd-t">热门榜</span>
                    <!-- 书本 -->
                    <!-- 热门榜 -->
                    <div class="remen" id="one">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/nanbook01.jpg" class="book" alt="万古神帝">
                                <div class="content">
                                    <h4 class="title">万古神帝</h4>
                                    <p class="intro">
                                        天地初开，太古混乱。灵长之战后，时空人祖、九巫、始佛、幽冥、大魔神相继出世，开创道法，威临八方，众生朝迎，世人尊为始祖。天尊无敌当世，始祖名传古今。但，皆不可得长生………………张若尘自逆境中崛起，从平凡中非凡，在这一条满是英才、妖魔、美人的长生路上，走出一个崭新的大世。
                                    </p>
                                    <p class="other">
                                        飞天鱼
                                        <span>·连载</span>
                                        <span>·1442万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/changxiao03.jpg" class="book" alt="遮天">
                                <div class="content">
                                    <h4 class="title">遮天</h4>
                                    <p class="intro">
                                        遮天动画，每周三10:00腾讯视频火热播出，VIP抢先看两集；叶凡、女帝、无始等将以立体的形式和你相见，等你一起来看。冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。这是太空探测器在枯寂的宇宙中捕捉到的一幅极其震撼的画面。九龙拉棺，究竟是回到了上古，还是来到了星空的彼岸？一个浩大的仙侠世界，光怪陆离，神秘无尽。热血似火山沸腾，激情若瀚海汹涌，欲望如深渊无止境……登天路，踏歌行，弹指遮天。
                                    </p>
                                    <p class="other">
                                        辰东
                                        <span>·完结</span>
                                        <span>·635万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/changxiao04.jpg" class="book" alt="灵境行者">
                                <div class="content">
                                    <h4 class="title">灵境行者</h4>
                                    <p class="intro">
                                        亘古通今，传闻世有灵境。关于灵境的说法，历朝历代的名人雅士众说纷纭，诗中记载：“自齐至唐，兹山濅荒，灵境寂寥，罕有人游。”“灵境不可状，鬼工谅难求。”
                                    </p>
                                    <p class="other">
                                        卖报小郎君
                                        <span>·完结</span>
                                        <span>·418万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 新书榜 -->
                    <span class="bd-t">新书榜</span>
                    <div class="xinshu" id="two">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshu01.jpg" class="book" alt="庆余年：范府大宗师">
                                <div class="content">
                                    <h4 class="title">庆余年：范府大宗师</h4>
                                    <p class="intro">
                                        我爹范建，皇帝发小，虎卫首脑，朝廷伯爵……我弟范闲，大名鼎鼎，小范大人！我妹范若若，一代狙神！我小弟范思辙，一代商业巨贾，北齐幕后大老板。我，一个平平无奇的范府嫡长子……为了不给家里人拖后腿，只好当个宗师了！没有宗师的家族，怎么能算大庆第一家族呢？
                                    </p>
                                    <p class="other">
                                        我的马甲有亿点多
                                        <span>·连载</span>
                                        <span>·10.1万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshu02.jpg" class="book" alt="我的梦境可以捡到至宝">
                                <div class="content">
                                    <h4 class="title">我的梦境可以捡到至宝</h4>
                                    <p class="intro">
                                        原初世界的无数文明中，有一个广为人知的说法。每一个文明降临原初之时，受到原初法则的影响，将会诞生少量蕴含着法则的至宝。每一位获得至宝的幸运儿，有五成概率晋升“尊者”，成为本文明的领袖级战力。更有幸运逆天之人，获得两件至宝，成长为威震十几个世界群的顶级强者。不过。杨凡并不这么认为。他表示：“至宝而已，不是有手就能捡吗？我做了几个梦，轻松捡到了五件。”
                                    </p>
                                    <p class="other">
                                        竹围月色
                                        <span>·连载</span>
                                        <span>·15.5万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshu03.jpg" class="book" alt="诸天：无数的我，纵横万界">
                                <div class="content">
                                    <h4 class="title">诸天：无数的我，纵横万界</h4>
                                    <p class="intro">
                                        穿越到成龙历险记，竟成了圣主，熟知阴阳平衡的他，直接开摆，靠着巨额财富，吃香的喝辣的。努力？能躺着的我，为什么要累死累活！直接享受人生，不好吗？就在这时，林川的金手指来了，居然能够跟诸天万界的无数自己互动交谈？！柯学世界，他是世人眼里的大善人，柯南却是将他视为最大的不法之徒。绝世唐门，他被邪恶之神选中，摇身一变从棋子变成棋手，被唐三视为最大的眼中钉，肉中刺，已有取死之道的典型！超神宇宙，死者复苏，他是天使曾经的皇，诺亚之光重现宇宙，镇压一切不服。                                </p>
                                    <p class="other">
                                        雨夜提枪
                                        <span>·连载</span>
                                        <span>·12.4万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 完结榜 -->
                    <span class="bd-t">完结榜</span>
                    <div class="wanjie" id="three">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/shoucang05.jpg" class="book" alt="斗破苍穹">
                                <div class="content">
                                    <h4 class="title">斗破苍穹</h4>
                                    <p class="intro">
                                        这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……斗破苍穹年番动画，每周日10:00正在腾讯视频火热播出，VIP抢先看2集；于深渊涅槃，收陨落心炎！斗破官方首套盲盒上市！更有惊喜隐藏款等你入手！
                                    <p class="other">
                                        天蚕土豆
                                        <span>·完结</span>
                                        <span>·532万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/wanjie02.jpg" class="book" alt="庆余年">
                                <div class="content">
                                    <h4 class="title">庆余年</h4>
                                    <p class="intro">
                                        积善之家，必有余庆，留余庆，留余庆，忽遇恩人；幸娘亲，幸娘亲，积得阴功。劝人生，济困扶穷……而谁可知，人生于世，上承余庆，终究却是要自己做出道路抉择，正是所谓岔枝发：东风携云雨，幼藤吐新芽。急催如颦鼓，洗尽茸与华。且待朝阳至，绿遍庭中架。更盼黄叶时，采得数枚瓜。…………《庆余年》同名影视剧由张若昀、李沁、陈道明、吴刚等主演，11月26日起在腾讯视频、爱奇艺开播。
                                    <p class="other">
                                        猫腻
                                        <span>·完结</span>
                                        <span>·747万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/wanjie03.jpg" class="book" alt="神秘复苏">
                                <div class="content">
                                    <h4 class="title">神秘复苏</h4>
                                    <p class="intro">
                                        “我叫杨间，当你看到这句话的时候我已经死了......”一张诡异的羊皮卷，一只窥视黑暗的眼睛，这是一个活下来的人经历的故事。——————                                </p>
                                    <p class="other">
                                        佛前献花
                                        <span>·完结</span>
                                        <span>·531万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 女生排行榜 -->
                <div class="rank-nv">
                    <p style="font-family: '仿宋';font-size: 30px; padding: 20px 0;" >女生排行榜</p>
                    <span class="bd-t">热门榜</span>
                    <!-- 书本 -->
                    <!-- 热门榜 -->
                    <div class="remen" id="four">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshunv03.jpg" class="book" alt="负债百万后，我在年代开工厂">
                                <div class="content">
                                    <h4 class="title">负债百万后，我在年代开工厂</h4>
                                    <p class="intro">
                                        上辈子，作为崔氏的长女，崔长嘉上有经商称霸一方的父母、能干的哥哥，下有学霸妹妹，富庶的家庭不用她操心生计，她在家人的宠爱中安心躺平了二十多年。直到——一场大火，千万家产化为乌有，父亲昏迷病重，哥哥烧伤毁容，妹妹被人欺辱自杀身亡，债主上门逼迫无家可归......家破人亡潦倒一生，崔长嘉直到临死才知道，崔家所有人的凄惨只是为了气运之子的崛起做垫脚石。被偷走的气运，被玩弄的人生，愤怒和不甘再睁开眼，崔长嘉回到了二十年前，重生到那场大火后所有人都和前世一样在等着看崔家的笑话。站在大火肆虐后满目狼藉的废墟上，崔长嘉下定决心，这一世她会护着崔家所有人，重振家业，将命运把握在自己手上。第一步，先重建崔氏家具厂！
                                    </p>
                                    <p class="other">
                                        王大姑娘
                                        <span>·连载</span>
                                        <span>·20.9万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshunv02.jpg" class="book" alt="重生成将门的小福星">
                                <div class="content">
                                    <h4 class="title">重生成将门的小福星</h4>
                                    <p class="intro">
                                        种田，空间，修仙，萌宝，甜宠，女强，爽文九州大陆，武道至上。凡人武者练至后天十二层，可突破极限，晋级先天武者，进入仙域修炼。仙魔大战，仙域九州剑尊，以身为剑，燃烧神魂，斩杀魔王，庇护一方平安。一朝带着记忆重生，开局流放，暮雪烟挥了挥小手，表示不在意。咱有神玉空间在手，吃喝不愁。～～～～～～～北辰国辅国公府，历代出将星。没人知道，这一代的将星，是个刚出生的小女娃。自从生养了小女娃，流放北疆苦寒之地的一家人，犹如开了挂一般，混的风生水起，富甲一方。
                                    </p>
                                    <p class="other">
                                        汀澜听雨
                                        <span>·连载</span>
                                        <span>·16.3万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/miaosha02.jpg" class="book" alt="港岛夜浓">
                                <div class="content">
                                    <h4 class="title">港岛夜浓</h4>
                                    <p class="intro">
                                        苏缇出身富贵，自小循规蹈矩。见惯了上流社会的虚情假意，某天突然心血来潮，想谈一场平凡的恋爱。于是苏缇斥巨资找网站红娘介绍对象的假消息，在圈子里不胫而走。
                                   </p>
                                    <p class="other">
                                        漫西
                                        <span>·连载</span>
                                        <span>·17.6万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 新书榜 -->
                    <span class="bd-t">新书榜</span>
                    <div class="xinshu" id="five">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshunv04.jpg" class="book" alt="十里芳菲">
                                <div class="content">
                                    <h4 class="title">十里芳菲</h4>
                                    <p class="intro">
                                        昆仑有两宝，一宝玄天境，可预知百年，一宝卫轻蓝，少年天才，承宗门重任。昆仑将这两宝护的紧，跟眼珠子一般。江离声是个修炼废柴，什么都会，什么都不精通，哪一种道，她也修不好，这也就罢了，偏偏她还是个惹事儿精，将宗门上下搅的日夜不得安宁。她师傅护犊子，在她引起众怒，众人发誓要将她踢出宗门时，直接将她送去了昆仑，美其名曰：昆仑规矩严，会教弟子，她去了一定能改造好。后来，江离声不但没被改造好，还闯了大祸，被整个昆仑追杀。因为，她失手砸了玄天境，又拐走了卫轻蓝。昆仑与她有了不共戴天之仇……其实，江离声自己也没想到她会这么能耐，最开始，她是实打实乖乖巧巧，坚决不到玄天境面前晃悠，也是躲着卫轻蓝走的啊……
                                    </p>
                                    <p class="other">
                                        西子情
                                        <span>·连载</span>
                                        <span>·6.1万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshunv05.jpg" class="book" alt="我的梦境可以捡到至宝">
                                <div class="content">
                                    <h4 class="title">带着快递驿站穿年代</h4>
                                    <p class="intro">
                                        过度劳累猝死的高芸，带着自家快递驿站穿越到了异世界六十年代，饥病交加而亡的高家十六岁养女同位体身上。本文又名《穿越了还要还房贷》《一天两份工，基本007》……
                                    </p>
                                    <p class="other">
                                        快穿狂魔
                                        <span>·连载</span>
                                        <span>·13.5万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/xinshunv06.jpg" class="book" alt="卷王魔女从不认输">
                                <div class="content">
                                    <h4 class="title">卷王魔女从不认输</h4>
                                    <p class="intro">
                                        【无cp、卡牌、学院、群像、轻松、日常】人类女性自苦难和逆境中觉醒进化，掌握魔法的力量，这是女巫。女巫二次觉醒进化，获得无限成长的潜力，这是魔女。魔女莫兰，异世之魂，自废土而来，手握卡牌之书，从女巫学院到天空之井，给了瓦伦各族，亿点点来自卷王的震撼。女巫同学：“卷王不可怕，可怕的是这个卷王是魔女！”瓦伦各族：“卷王魔女恐怖如斯！瑟瑟发抖中……”莫兰：“我只是为了回家看看。”
                                    </p>
                                    <p class="other">
                                        忘鱼鱼
                                        <span>·连载</span>
                                        <span>·2.5万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 完结榜 -->
                    <span class="bd-t">完结榜</span>
                    <div class="wanjie" id="six">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/nv05.jpg" class="book" alt="至尊三小姐">
                                <div class="content">
                                    <h4 class="title">至尊三小姐</h4>
                                    <p class="intro">
                                        她，出身武术世家却是心思单纯的痴女，虽一心远离是非心机，却终被男友背叛。耳边干脆的枪声，昭示着她的重生。她，是世族莫家的废柴小姐，四岁丧父，其母不详，寄人篱下，身无玄气，连个七岁孩童都能轻易欺辱。被排挤，被退婚，被逼至山崖边缘。平静的渴望粉身碎骨。她仰天大喝：“今日不死，他日必当凌驾于你这瞎了眼的苍天之上！”神秘遣址？无人兽山？想进就闯了！上古神兽？紫光战甲？想要就拿了！地玄了不起吗？武玄很牛叉吗？真玄又算哪颗葱？惹恼本小姐，我让你们求生无路，寻死无门！遇神杀神，遇魔屠魔，普天之下，唯我至尊！
                                    <p class="other">
                                        夜月业
                                        <span>·完结</span>
                                        <span>·95.9万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/wanjienv02.jpg" class="book" alt="魅医倾城">
                                <div class="content">
                                    <h4 class="title">魅医倾城</h4>
                                    <p class="intro">
                                        【正文已完结】君慕颜前世活的辛苦，死的凄凉。重活一世，她身边多了个冷面萌宝。“小宝，那个想要契约圣兽的女人是娘的仇人诶。”于是，顶阶圣兽成了小宝的灵宠。“小宝，这个神乐师的传承好强大啊！”小手轻轻一推，传承结界打开，君慕颜成为神乐师唯一传人。“小宝，这男人老是缠着娘亲不放诶！”小宝一掌挥出，把人赶走……咦，赶不走？！你是我爹？爹是什么？能吃吗？
                                    <p class="other">
                                        相思梓
                                        <span>·完结</span>
                                        <span>·524万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/wanjienv03.jpg" class="book" alt="嫡嫁千金">
                                <div class="content">
                                    <h4 class="title">嫡嫁千金</h4>
                                    <p class="intro">
                                        《墨雨云间》薛芳菲姜梨萧蘅原著小说薛家小姐，才貌双绝，嫁得如意郎，恩爱和谐，三载相伴，郎君高中状元。夫荣妻不贵，他性贪爵禄，为做驸马，将她视作尚公主路上的绊脚石，杀妻灭嗣。骄纵公主站在她塌前讥讽：便是你容颜绝色，才学无双，终究只是个小吏的女儿，本宫碾死你——就跟碾死一只蚂蚁一样简单！被污声名，悬梁自尽，幼弟为讨公道却被强权害死，老父得此噩耗一病不起撒手人寰。洪孝四十二年，燕京第一美人薛芳菲香消玉殒，于落水的首辅千金姜梨身体中重焕新生！一脚跨入高门大户，阴私腌臜层出不绝。各路魍魉魑魅，牛鬼蛇神，她以牙还牙以眼还眼。曾经柔软心肠，如今厉如刀锋！姜梨发誓，再也不要微如尘埃任人践踏，这一世，平府上冤案，报血海深仇！
                                    </p>
                                    <p class="other">
                                        千山茶客
                                        <span>·完结</span>
                                        <span>·130万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 出版排行榜 -->
                <div class="rank-cb">
                    <p style="margin-top: 20px;font-family: '仿宋';font-size: 30px; padding: 20px 0; " >出版排行榜</p>
                    <span class="bd-t">畅销榜</span>
                    <!-- 书本 -->
                    <!-- 畅销榜 -->
                    <div class="changxiao" id="seven">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/chuban01.jpg" class="book" alt="文明的故事7：理性开始的时代">
                                <div class="content">
                                    <h4 class="title">文明的故事7：理性开始的时代</h4>
                                    <p class="intro">
                                        《理性开始的时代》，是“理想国经典馆”系列作品《文明的故事》第7卷。自伊丽莎白一世登基，至“三十年战争”结束，这一时期是理解现代欧洲的关键一章。其基本发展是民族国家主权的兴起，及神学的式微与教皇权力的衰落。宗教改革的结果开始在欧洲诸国显现，国家与国家之间、国内各宗教派系间，纷争不断，整个欧洲被卷入可怕的“三十年战争”。而在信仰崩溃的裂痕中，越来越多的人转向科学和哲学去探索人生的答案。这是莎士比亚、伦勃朗、塞万提斯的时代，也是培根、伽利略、布鲁诺、笛卡尔的时代，是人性焕发的时代，也是理性觉醒的时代。改变欧洲甚至世界心灵的信仰与理性之争，正在兴起。
                                    </p>
                                    <p class="other">
                                        (美)威尔·杜兰特 阿里尔·杜兰特
                                        <span>·世界史</span>
                                        <span>·55万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/changxiao03.jpg" class="book" alt="遮天">
                                <div class="content">
                                    <h4 class="title">韧性社会</h4>
                                    <p class="intro">
                                        金融危机、国际冲突、气候变化、新冠疫情……各种不确定性冲击给全世界带来了巨大的挑战，也给我们提供了反思当下发展模式的良机。冲击过后，社会是会很快恢复，还是会留下永久的疤痕？最重要的是，如何重构社会，才能更有韧性地应对不可避免的严重冲击？韧性的培育面临哪些复杂的冲突和权衡？真正坚韧的系统应该是橡树那样稳健强大，还是如芦苇一般游刃有余？本书试图回答这些问题。作者在书中引入了韧性这一关键概念，并结合社会契约论和外部性等经济学理论，分析个人、机构、社会、宏观经济和国际秩序在面对各种重大冲击与危机时，如何保持韧性。该书为培育韧性提供了蓝本，为洞察和思考世界经济政治趋势打开了新的视角和维度。
                                    </p>
                                    <p class="other">
                                        (德)马库斯·布伦纳梅尔
                                        <span>·通俗读物</span>
                                        <span>·14.2万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/miaosha06.jpg" class="book" alt="月亮与六便士">
                                <div class="content">
                                    <h4 class="title">月亮与六便士</h4>
                                    <p class="intro">
                                        书中的主人公“我”是伦敦怀才不遇的作家，偶然间认识了一位证券经纪人，对方在人届中年后突然响应内心的呼唤，离经叛道舍弃一切，先是奔赴巴黎，后又到南太平洋的塔希提岛与土著人一起生活，全身心投入绘画，并在死后声名大噪。“我”在他成名后开始追溯与艺术家曾经的来往与对方之后的人生经历。艺术家的故事以生极落魄、死备哀荣的法国后印象派画家高更的生平为基础。
                                    </p>
                                    <p class="other">
                                        (英)毛姆
                                        <span>·世界名著</span>
                                        <span>·22.7万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 当当榜 -->
                    <span class="bd-t">当当榜</span>
                    <div class="dd" id="eight">
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/chuban04.jpg" class="book" alt="跟着诗词去旅行">
                                <div class="content">
                                    <h4 class="title">跟着诗词去旅行</h4>
                                    <p class="intro">
                                        本书是一本地理类旅游图书，以诗词为“向导”，精选中国30余个具有代表性的旅行胜地，让读者在诗词营造的唯美意境里感受祖国大好河山的清婉与壮美，在青山绿水、碧树繁花间感悟诗词的无穷魅力。书中收录了大量的精美图片，不但给人一种视觉上的审美享受，更让人有一种身临其境之感。
                                    </p>
                                    <p class="other">
                                        郝娟菡
                                        <span>·随笔</span>
                                        <span>·8.6万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/chuban05.jpg" class="book" alt="长安的荔枝">
                                <div class="content">
                                    <h4 class="title">长安的荔枝</h4>
                                    <p class="intro">
                                        同名实体书新鲜上市，马伯庸历史短小说“见微”系列神作！大唐天宝十四年，长安城小吏李善德突然接到一个任务：要在贵妃诞日之前，从岭南运来新鲜荔枝。荔枝保鲜期只有三天，而岭南距长安五千余里，山水迢迢，这是个不可能完成的任务。为了家人，李善德只得放手一搏……古装版社畜求生记，帝国夹缝中的小人物史诗。
                                    </p>
                                    <p class="other">
                                        马伯庸
                                        <span> ·历史</span>
                                        <span>·9万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="rank-book">
                            <a href="#">
                                <img src="./img/chuban06.jpg" class="book" alt="小王子">
                                <div class="content">
                                    <h4 class="title">小王子</h4>
                                    <p class="intro">
                                        3D动画奇幻电影《小王子》中文配音版于2015年10月16日中国上映！这是一本足以让人永葆童心的不朽经典，被全球亿万读者誉为最值得收藏的书。翻开本书，您将看到遥远星球上的小王子，与美丽而骄傲的玫瑰吵架负气出走，在各星球漫游中，小王子遇到了傲慢的国王、酒鬼、惟利是图的商人，死守教条的地理学家，最后来到地球上，试图找到治愈孤独和痛苦的良方。这时，他遇到一只奇怪的狐狸，于是奇妙而令人惊叹的事情发生了……《小王子》犹如透亮的镜子，照出了荒唐的成人世界。她在提醒我们，只有爱，才是最高的哲学，才是我们活下去的唯一理由。
                                    </p>
                                    <p class="other">
                                        (法)安托万·德·圣埃克苏佩里著 李继宏译
                                        <span>·影视</span>
                                        <span>·3.7万字</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                </div>
            
                
            </div>
        </div>
       
    </div>
    <!-- 脚部模块 -->
    <footer>
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
            
        </div>
    </footer>

    <script>
        // 获取元素
        var mySidenav = document.querySelector("#mySidenav")
        var main = document.querySelector("#main")
        // 打开侧边栏
        function openNav() {           
            // main让出位置
            main.style.marginLeft = main.style.marginLeft ? null : 200 + 'px'
            mySidenav.style.width = main.style.marginLeft ? 200 + 'px' : null
        }
        // 关闭侧边栏
        function closeNav() {
            main.style. marginLeft = null
            mySidenav.style.width = null
        }

        // 电梯导航
        var list = document.querySelector(".tabs-t")
        // 点击页面可以滑动
        list.addEventListener('click', function(e) {
            if (e.target.tagName === 'LI' && e.target.dataset.id) { //选中点击对象里面li标签
                //移出原来的active
                // 先获取原来的类
                var act = document.querySelector(".tabs-t .active")
                // 判断 //有这个类就移出,没有就不移除
                if(act) {
                    act.classList.remove('active')
                }            
                // 当前的加上
                e.target.classList.add('active')

                // 获得自定义属性
                // console.log(e.target.dataset.id)
                // 根据小盒子的自定义属性值 去对应选择大盒子
                // console.log(document.querySelector(`#${e.target.dataset.id}`))
                // 获得对应大盒子的offsetTop
                var top = document.querySelector(`#${e.target.dataset.id}`).offsetTop
                console.log(top)
                // 页面滚动到对应的位置
                document.documentElement.scrollTop = top - 120
                
            }
        })
        // 滚动页面，根据大盒子选 小盒子 添加active
        window.addEventListener('scroll' ,function(){
             
          
            //获取每个大盒子的元素 定义一个数组存储id
            var arr = ['one','two','three','four','five','six','seven','eight']
            for (var i = 0;i < arr.length;i++) {
                // 拿到每个大盒子
                var item = document.querySelector(`#${arr[i]}`)
                var n = document.documentElement.scrollTop
                if(n + 160 >= item.offsetTop) {
                    
                    // 选择小盒子
                    document.querySelectorAll(`[data-id=${arr[i]}]`).forEach(index=> {
                        // 移出原来的类  
                        document.querySelector(".tabs-t .active").classList.remove('active')
                        index.classList.add("active")
                        console.log(index)
                    })
                    // console.log(n)
                } 
            }
            
        })
        
        
    </script>
</body>
</html>